<template>
  <div>
    <div id="ClassLabel_2" :style="{width: '650px', height: '500px'}"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: '',
        isShow: false,
        dts: ''
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('ClassLabel_2'));

        var hours = ['不足', '基本', '中等',
          '较好', '最好'
        ];
        var days = ['体重达标', '糖尿病体征达标', '糖尿病并发症管理',
          '糖尿病胰岛素治疗', '糖尿病口服药治疗'
        ];
        var data = [
          [0, 0, 1],
          [1, 0, 18],
          [2, 0, 28],
          [3, 0, 19],
          [4, 0, 39],
          [0, 1, 7],
          [1, 1, 14],
          [2, 1, 69],
          [3, 1, 79],
          [4, 1, 50],
          [0, 2, 31],
          [1, 2, 11],
          [2, 2, 24],
          [3, 2, 34],
          [4, 2, 44],
          [0, 3, 54],
          [1, 3, 64],
          [2, 3, 74],
          [3, 3, 85],
          [4, 3, 95],
          [0, 4, 10],
          [1, 4, 34],
          [2, 4, 26],
          [3, 4, 41],
          [4, 4, 61]
        ];
        data = data.map(function(item) {
          return [item[1], item[0], item[2] || '-'];
        });

        myChart.setOption(
          {
            textStyle: {
              color: '#fff',
              fontWeight:'bolder'
            },
            title: {
              text: '',
              subtext: '',
              left: 'center',
            },
            tooltip: {
              position: 'top',
              formatter: function (params) {
                return  days[params.value[1]]+ ' '+hours[params.value[0]]+'类别人数：' + params.value[2];
              }
            },

            animation: false,
            grid: {
              height: '60%',
              width:'60%',
              left: 'center',
              y: '10%',
/*              x:'30%'*/
            },
            xAxis: {
              type: 'category',
              data: hours,
              splitArea: {
                show: true
              }
            },
            yAxis: {
              type: 'category',
              data: days
              ,

              splitArea: {
                show: true
              }

            },

            visualMap: {
              min: 0,
              max: 100,
              calculable: true,
              orient: 'horizontal',
              left: 'center',
              bottom: '10%',
              inRange: {
                color: ['#edf8b1','#c7e9b4','#52b6c4','#3d91c0','#243494','#081d58']
              }
            },
            series: [{
              name: 'Cluster信息:',
              type: 'heatmap',
              data: data,
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
                ,
                normal:{
                  borderColor:"#fff",
                  borderWidth:"4"

                }
              }
            }]
          }
        );
      }
    }


  }
</script>

<style scoped>

</style>
